<template>
  <div class="find">
    <!-- 头部 -->
    <van-nav-bar title="发现" />
    <!-- 面试技巧 -->
    <div class="int_title">
      <h4 class="int_text">面试技巧</h4>
      <div class="int_nav" @click="moreInt">
        <span>查看更多</span>
        <i class="iconfont iconicon_more"></i>
      </div>
    </div>
    <technicItem
      v-for="(item, index) in viewList"
      :key="index"
      :item="item"
      @click="$router"
    ></technicItem>
    <!-- 市场数据 -->
    <market :marketList="marketList"></market>
    <!-- 面经分享 -->
    <div class="int_title">
      <h4 class="int_text">面经分享</h4>
      <div class="int_nav">
        <span>查看更多</span>
        <i class="iconfont iconicon_more"></i>
      </div>
    </div>
    <shareItem></shareItem>
  </div>
</template>

<script>
// 面试技巧
import { articlesTechnic } from '@/api/api.js'
import technicItem from '../technicList/technicItem.vue'
import market from './market_data/market_data'
import shareItem from '../shareList/shareItem.vue'
export default {
  components: {
    technicItem,
    market,
    shareItem
  },
  data () {
    return {
      viewList: [],
      marketList: ''
    }
  },
  created () {
    this.getInterviewList()
  },
  methods: {
    // 面试技巧 点击查看更多
    moreInt () {
      this.$router.push('/technicList')
    },
    // 获取面试技巧数据列表
    async getInterviewList () {
      const res = await articlesTechnic({ limit: 3 })
      this.viewList = res.data.list
    }
  }
}
</script>

<style lang="less" scoped>
.find {
  font-size: 16px;
  background-color: #f9f9f9;
}
</style>
<style lang="less">
.int_title {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 10px;
  .int_text {
    flex: 8;
    font-size: 18px;
    font-weight: 500;
    color: #222222;
  }
  .int_nav {
    font-size: 14px;
    color: #5b5d75;
  }
}
</style>
